<template>
    <div class="mypop_msg"
         :class="[{'animated fadeIn':popShow},{'animated fadeOut':!popShow,above_modal:above_modal},typeClass]"
         v-show="popShow">
        <div v-if="type=='msg'" class="ui message icon mycon" :class='[option.msgType,"vcenter"]'>
            <i class="ui icon close myclose" title="关闭" @click.stop.prevent="hideMypop"></i>
            <i class="icon" :class='option.msgTypeIcon'></i>
            <div v-if="msgArr" class="ui divided items msgArrList">
                <div class="item" v-for="msg in msgArr">
                    <div class="content">
                        {{msg}}
                    </div>
                </div>
            </div>
            <!--<tree_view v-else-if="option.isJson" :data='option.content'-->
                       <!--:options="{maxDepth: 4,rootObjectKey:option.rootObjectKey}"></tree_view>-->
            <!--<span v-else-if="option.isJson">{{option.content|json}}</span>-->
            <span v-else v-html="option.content"></span>
        </div>
        <div class="ui segment mycon" :class="[typeClass,{useMargin,vcenter:!useMargin}]" v-else>
            <i class="ui icon close myclose" title="关闭" @click.stop.prevent="hideMypop"></i>
            <mybind v-if="type=='bind'&&option_bind" :field="option_bind" fromMypop="1" @setVo='setBindVo'
                    @toHide="hideMypop" class="bind_con" from="mypop"
                    :param="option_bind.param"></mybind>
            <pic_real v-if="type=='pic_real'&&option_pic" :option="option_pic" :ctl="ctl"
                       :modalShow="popShow"></pic_real>
            <detailCom v-if="type=='detail'&&option_detail" :detail_id="option_detail.detail_id" :ctl="ctl"
                       :modalShow="popShow"></detailCom>
            <popComponent v-if="type=='showCom'" :option="option_detail" :modalShow="popShow"></popComponent>
        </div>

    </div>
</template>
<script>
    import tool from 'src/util/tool';
    import util from '_util/index';
    import _ from 'lodash';
    import get_size from 'get-size';

    import mybind from 'components/field/bind';
    import pic_real from './pic_real';
    import detailCom from 'components/detail/detailCom'
    import popComponent from 'components/detail/popComponent'
//    import tree_view from 'components/tree_view/TreeView'
//    import {json2html} from 'html2json'

    export default {
        data() {
            return {
                popShow: false,
                above_modal: false,
                useMargin: false,
                mycon_hight: null,
                myintval: null,
                type: 'msg',
                option_bind: {},
                option_detail: {},
                option_pic: {},
                option: {
                    content: '恭喜你，操作成功！',
                    msgType: 'success',
                    time: 800,
                    msgTypeIcon: 'smile',
                }
            }
        },
        components: {
            mybind, detailCom, popComponent,pic_real,
//            tree_view
        },
        methods: {
            hideMypop(){
                this.popShow = false
                this.above_modal = false
				this.type = 'msg'
				if(this.option_detail.hide_in_model){
					util.store.push(this, 'set_in_modal','in_modal',false,false,'global');
				}
            },
            setBindVo(fname, val, title) {
                if (util.isFunction(this.option_bind.clb)) {
                    this.option_bind.clb(fname, val, title);
                }
            },
            setMyTimtout(time = 1200) {
                window.setTimeout(() => {
                    this.popShow = false;
                }, time);
            },
            set_above_modal() {
                let in_modal = util.store.get(this, 'in_modal');

                this.above_modal = in_modal
            },
            set_mycon_hight() {
                if(['msg'].contains(this.type))
                    return;

                this.myintval=setInterval(() => {
                  if(!this.popShow) {
                      clearInterval(this.myintval);
                      return;
                  }
                    let size = get_size(this.selector);
                  if(size) {
                      this.mycon_hight = size.height;
                      let innerHeight = window.innerHeight;

                      this.useMargin = innerHeight - 50 < this.mycon_hight;
                  }

                }, 100);

            },
            showMypop(option) {
                if (option.content) {
                    this.set_above_modal()
                    this.popShow = true;
                    delete this.option.content;
                    this.option = _.merge(this.option, option);
                    if (!option.no_hide)
                        this.setMyTimtout(option.time);
                }
            },
            showBind(option) {
                if (option.bindModel) {
                    if (option.bindModel != this.option_bind.bindModel || option._id != this.option_bind._id) {

                        this.option_bind = null;
                    }
                    this.$nextTick(() => {
//          option.need_get_bind_name=1
                        this.option_bind = _.merge(this.option_bind || {}, option);
                        this.type = 'bind';

                        this.set_above_modal()
                        this.popShow = true;
                    });

                }
            },
            showPopCom(option){
                if (option) {
                    if (option.id != this.option_detail.id)
                        this.option_detail = null;
                    this.option_detail = _.merge(this.option_detail || {}, option);
                    this.set_above_modal();
                    this.popShow = true;
                    this.type = 'showCom';
                }
            },
            showDetail(option) {
                if (option.detail_id) {
                    if (option.detail_id != this.option_detail.detail_id)
                        this.option_detail = null;
                    this.option_detail = _.merge(this.option_detail || {}, option);
                    this.type = 'detail';

                    this.set_above_modal()
                    this.popShow = true;
                }
            },
            show_pic_real(option) {
                if (option.img) {
                    if (option.img != this.option_pic.img)
                        this.option_pic = null;
                    this.option_pic = _.merge(this.option_pic || {}, option);
                    this.type = 'pic_real';

                    this.set_above_modal();
                    this.popShow = true;
                }
            }
        },
        watch: {
            popShow(n, o) {
                if (n) {
                    this.set_mycon_hight();
                }else{
                    clearInterval(this.myintval);
                    this.myintval=null;
                }
            }
        },
        props: {},
        computed: {
            selector() {
                return `.ui.segment.mycon.${this.typeClass}`;
            },
            typeClass() {
                return `my${this.type}`;
            },
            ctl() {
                return this.$route.query.ctl;
            },
            msgArr(){
                let msg = this.option.content;
                if (util.isArray(msg)) {
                    return msg;
                } else
                    return null;
            }
        },
        created() {
            let eventVue = util.store.get(this,'eventVue');
            eventVue.$on('showMypop', this.showMypop);
            eventVue.$on('hideMypop', this.hideMypop);
            eventVue.$on('showPopBind', this.showBind);
            eventVue.$on('showPopDetail', this.showDetail);
            eventVue.$on('showPopCom', this.showPopCom);
            eventVue.$on('show_pic_real', this.show_pic_real);
        },
        mounted() {

        }
    }
</script>
<style rel="stylesheet/less" lang="less" scoped>@dir: "common/";
.mypop_msg {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    &.above_modal {
        z-index: 1001;
    }
    background: rgba(0, 0, 0, 0.7);
    .closeCom() {
        height: 1.4em;
        font-size: 21px;
        float: right;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.5);
        &:hover {
            color: rgba(0, 0, 0, 0.8);
        }
    }
    &.mybind {
        .ui.icon.close.myclose {
            .closeCom();
        }
        .bind_con {
            margin-top: 30px;
        }
    }
    .ui.mycon {

        width: 60%;
        min-width: 500px;
        &.useMargin{
            margin:10% auto;
        }
        &.vcenter{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }


        .ui.icon.close.myclose {
            .closeCom();
        }
        &>div{
            clear: right;
        }
        &.mydetail{
            width: 90%;
        }
		&.myshowCom {
            width: 80%;
			max-width: 1000px
        }
    }

    .ui.divided.items.msgArrList {
        margin-left: 20px;
        margin-top: 0;
    }
}

</style>
